.body-right-pageEdt {
  position: absolute;
  z-index: 4;
  width: 360px;
  height: 995px;
  top: 85px;
  right: 0;
  color: #F4F4F4;
  //width: 100%;
  //height: 100%;
  //overflow: hidden;
  background-color: rgb(12, 18, 30, 1);

  //body-title的背景
  .el-collapse-item__header {
    background-color: rgba(85, 85, 85, 1)
  }

  //每一个body的背景
  .el-collapse-item__wrap {
    will-change: height;
    background-color: rgb(12, 18, 30, 1);
    overflow: hidden;
    box-sizing: border-box;
    border-bottom: 1px solid #EBEEF5;
  }

  //每一个body的标题的颜色
  .el-collapse-item__content {
    background-color: rgb(12, 18, 30, 1);
    color: #FFFFFF;
  }

  //每一个按钮的颜色和交互
  button.is-plain {
    background-color: rgb(12, 18, 30, 1);
    color: rgb(66, 229, 186, 1);
    border-color: rgb(66, 229, 186, 1);
    margin-left: 10px;
  }

  button.is-plain:hover {
    background-color: rgb(65, 225, 178, 0.2);
  }

  .pageEdt-top {
    padding: 0 10px;
    display: flex;
    height: 5%;
    align-items: center;
    /* 在纵轴上居中 */
    border-bottom: 1px solid #FFFFFF;
    background-color: rgb(12, 18, 30, 1);

    .top-title {
      width: 100%;
      font-size: 20px;
      background-color: rgb(12, 18, 30, 1);
    }

    i {
      font-size: 24px;
    }
  }

  .pageEdt-body {
    overflow-y: auto;
    height: 95%;

    .body-title {
      font-size: 20px;
      font-weight: bold;
      padding: 10px 10px 10px;
      color: #87CEFA;
    }

    .body-one {
      span {
        padding: 3px 10px;
        font-size: 20px
      }

      .input-with-select {
        width: 200px;
        height: 20px;
        font-size: 20px;
        margin-right: 10px
      }

      //输入框
      .el-input__inner {
        background-color: rgb(12, 18, 30, 1);
        color: #FFFFFF;
        height: 30px;
        font-size: 18px;
      }

      //带按钮的输入框的按钮
      .el-input-group__append button.el-button {
        background-color: rgb(12, 18, 30, 1);
        color: rgb(66, 229, 186, 1);
        //border: 1px solid #ffffff;
        height: 33px;
        border: 1px solid rgb(66, 229, 186, 1);
      }
    }

    .body-two {
      .el-button--mini {
        font-size: 18px;
        border-radius: 3px;
      }
    }

    .body-thr {
      margin-top: 10px;

      .body-thr-title {
        vertical-align: middle;
        padding: 3px;
        margin-left: 10px;
        margin-right: 5px;
        font-size: 20px
      }

      .color-picker {
        vertical-align: middle;
      }

      // 链接按钮
      .link-btn-box {
        display: inline-block;

        .link-btn {
          display: flex;
        }
      }


      //下拉框
      .dropdown-chart {
        margin-left: 10px;
        border: 1px solid #ccc;
        border-radius: 5px;
      }

      .el-dropdown {
        margin-top: 10px;
        color: #FFFFFF;
        font-size: 20px;
        padding: 3px;
        width: 140px;
        text-align: center;
        white-space: nowrap;
        /* 不换行 */
        overflow: hidden;
        /* 超出部分隐藏 */
        text-overflow: ellipsis;
        /* 用省略号表示 */
      }

      //文本框按钮
      .el-button--mini {
        margin-top: 10px;
        font-size: 18px;
        border-radius: 3px;
      }

      .body-thr-select {
        font-size: 18px;
        width: 140px;
      }

      .el-input__inner {
        background-color: rgb(12, 18, 30, 1);
        color: #FFFFFF;
        height: 30px;
        font-size: 18px;
        border: 1px solid rgb(66, 229, 186, 1);
      }

      .el-input-number__decrease {
        background-color: rgb(12, 18, 30, 1);
        color: rgb(66, 229, 186, 1);
        border: 1px solid rgb(66, 229, 186, 1);
      }

      .el-input-number__increase {
        background-color: rgb(12, 18, 30, 1);
        color: rgb(66, 229, 186, 1);
        border: 1px solid rgb(66, 229, 186, 1);
      }


      .upload-image {
        display: flex;
        margin-top: 10px;

        //图片上传
        .upload-demo {
          margin-left: 10px;
          font-size: 20px;

          .el-button--small {
            font-size: 18px;
            padding: 7px 15px;
            background-color: rgb(12, 18, 30, 1);
            color: rgb(66, 229, 186, 1);
            border-color: rgb(66, 229, 186, 1);
          }

          .el-button--small:hover {
            background-color: rgb(65, 225, 178, 0.2);
          }
        }
      }

      //下拉框的样式
      .el-input--suffix .el-input__inner {
        font-size: 18px;
        background-color: rgb(12, 18, 30, 1);
        color: #FFFFFF;
        height: 30px;
      }

      .select-text {
        margin-top: 10px;
        margin-left: 10px;
        border-radius: 5px;
        font-size: 20px;
        padding: 3px;
        text-align: center;
        //

        .el-input__inner {
          color: rgb(66, 229, 186);
          background-color: rgb(12, 18, 30, 1);
          border: 1px solid rgb(66, 229, 186);
          height: 40px;
          width: 100px;
          font-size: 16px;
        }
      }
    }

    .body-shape {
      display: flex;
      align-items: center;

      .body-shape-box {
        cursor: pointer;
        width: 40px;
        height: 40px;
        border: 1px solid #ccc;
        border-radius: 4px;
        margin-top: 20px;
        margin-left: 10px;
        padding: 5px;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0);
        display: flex;
        justify-content: center;
        align-items: center;

        .rectangle {
          width: 30px;
          height: 20px;
          background-color: #fff;
        }

        .rectangle2 {
          width: 30px;
          height: 20px;
          background-color: #fff;
          border-radius: 5px;
        }

        .circle {
          width: 30px;
          height: 30px;
          background-color: #fff;
          border-radius: 50%;
        }

        .triangle {
          width: 0;
          /* 设置宽度为0 */
          height: 0;
          /* 设置高度为0 */
          border-width: 20px;
          /* 设置边长 */
          border-style: solid;
          /* 设置边线类型为实线 */
          border-color: transparent transparent rgb(255, 255, 255) transparent;
          /* 设置上、右、左边界不显示，只显示下边界 */
          margin-top: -20px;
        }
      }

      //下拉框
      .select-shape {
        margin-top: 10px;
        margin-left: 10px;
        border-radius: 5px;
        font-size: 20px;
        padding: 3px;
        text-align: center;
        //

        .el-input__inner {
          color: rgb(66, 229, 186);
          background-color: rgb(12, 18, 30, 1);
          border: 1px solid rgb(66, 229, 186);
          height: 40px;
          width: 100px;
          font-size: 16px;
        }
      }

      .shape-del {
        padding: 3px;
        margin-left: 10px;
        margin-right: 5px;
        margin-top: 10px;
        font-size: 20px;
        cursor: pointer;
      }

      .shape-del:hover {
        color: #f36a6a;
      }
    }

    .body-thr-textarea {
      margin-left: 10px;
      margin-top: 10px;
      margin-right: 10px;

      //文本域的背景
      .el-textarea__inner {
        background-color: rgb(12, 18, 30, 1);
        color: #FFFFFF;
        font-size: 18px;
      }

      //文本域的背景
      .el-textarea .el-input__count {
        background-color: rgb(12, 18, 30, 1);
        color: #FFFFFF;
      }
    }

    .body-fou {
      width: 360px;

      //body-title的背景
      .el-collapse-item__header {
        background-color: rgba(136, 134, 134, 0.96)
      }

      .body-fou-title {
        padding: 3px;
        margin-left: 10px;
        font-size: 18px;
        color: #92d0e8;
        font-weight: bold;
      }

      .body-fou-body {
        width: 340px;
        display: flex;

        //图表类型的图标
        .fou-body-icon {
          width: 40px;
          height: 40px;
          border: 1px solid #ccc;
          border-radius: 5px;
          box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
          padding: 5px;
          //cursor: move;
          font-size: 36px;
          text-align: center;
          line-height: 35px;
          margin-top: 20px;
          margin-left: 10px;
          cursor: pointer;
        }

        .fou-body-title {
          font-size: 18px;
          margin-left: 10px;
          margin-right: 10px;
          color: #FFFFFF;

        }

        //下拉框
        .select-chart {
          margin-top: 10px;
          margin-left: 10px;
          border-radius: 5px;
          font-size: 20px;
          padding: 3px;
          text-align: center;
          //

          .el-input__inner {
            color: rgb(66, 229, 186);
            background-color: rgb(12, 18, 30, 1);
            border: 1px solid rgb(66, 229, 186);
            height: 40px;
            width: 100px;
            font-size: 16px;
          }
        }

        .data-icon {
          display: flex;
          border-radius: 5px;
          margin-top: 15px;
          margin-left: 5px;

          i {
            padding: 3px;
            margin-left: 10px;
            margin-right: 5px;
            font-size: 20px;
            cursor: pointer;
          }

          .fou-body-delC:hover {
            color: #f36a6a;
          }

          .fou-body-addD:hover {
            color: #60e72b;
          }

          .fou-body-delD:hover {
            color: #e13b3b;
          }

          .fou-body-upD:hover {
            color: #3e8bce;
          }
        }

        //图表数据
        .fou-body-data {
          display: flow;
          margin-top: 20px;

          .data-body {
            width: 340px;
            margin-left: 10px;
            display: flow;
            justify-content: center;
            align-items: center;
            overflow-x: auto;

            .data-body-one {
              display: flex;

              .one-margin {
                margin-bottom: 2px;
                margin-right: 2px;
              }

              .el-input--mini .el-input__inner {
                text-align: center;
                width: 66px;
                height: 40px;
                line-height: 36px;
                font-size: 16px;
                border-radius: 5px;
                background-color: rgb(12, 18, 30, 1);
                color: #FFFFFF;
              }

              .el-input__inner {
                padding: 0;
              }
            }
          }
        }

        //图表样式
        .body-fou-form {

          .el-form-item__label {
            font-size: 20px;
            margin-left: 13px;
            margin-bottom: 10px;
            color: #FFFFFF;
          }

          .form-title {
            margin-top: 10px;

            span {
              font-size: 18px;
              margin-left: 10px;

            }

            //输入框
            .el-color-picker__icon,
            .el-input,
            .el-textarea {
              width: 90px;
              margin-left: 5px;
            }

            .el-input__inner {
              background-color: rgb(12, 18, 30, 1);
              font-size: 16px;
              text-align: center;
              color: #FFFFFF;
            }

          }

          .form-bgColor {
            margin-top: 10px;

            .vc-sketch {
              position: relative;
              font-size: 18px;
              margin-left: 10px;
              width: 320px;
              padding: 10px 10px 0;
              box-sizing: initial;
              background: #fff;
              border-radius: 4px;
              box-shadow: 0 0 0 1px rgba(0, 0, 0, .15), 0 8px 16px rgba(0, 0, 0, .15);
            }

            .vc-sketch-field .vc-input__input {
              font-size: 16px;
              height: 30px;
              width: 80%;
              text-align: center;
            }

            .vc-sketch-field .vc-input__label {
              font-size: 16px;
            }
          }

          .form-insides {
            margin-left: 10px;

            span {
              font-size: 20px;
              margin-left: 50px;
              line-height: 40px;
              text-align: center;
            }
          }

          .form-color {
            margin-left: 113px;
            left: -21px;
          }
        }
      }
    }

    .el-collapse-item__content {
      padding-bottom: 20px;
    }
  }
}